<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Web Chat</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="channel-bar">
		<input type="text" id="nickname-input" onchange="changeNickname(this.value);">
		<div id="settings-menu">
			<div class="settings-menu-entry">
				<span class="setting-name">Clear-on-Send</span>
				<div class="setting-options">
					<div class="option-2" id="inner-1.1" onclick="change_clear_on_send(this);">Off</div>
					<div class="option-2" id="inner-1.2" onclick="change_clear_on_send(this);">On</div>
				</div>
			</div>
			<div class="settings-menu-entry">
				<span class="setting-name">Timestamps</span>
				<div class="setting-options">
					<div class="option-2" id="inner-2.1" onclick="change_timestamps(this);">Off</div>
					<div class="option-2" id="inner-2.2" onclick="change_timestamps(this);">On</div>
				</div>
			</div>
			<div class="settings-menu-entry">
				<span class="setting-name">Settings save</span>
				<div class="setting-options">
					<div class="option-2" id="inner-3.1" onclick="change_settings_save(this);">Off</div>
					<div class="option-2" id="inner-3.2" onclick="change_settings_save(this);">On</div>
				</div>
			</div>
		</div>
		<div id="settings-button" onclick="toggle_settings_visibility();">
			<img src="./img/settings_icon.svg">
		</div>
	</div>
	<div id="message-list">
		<div class="message-container">
			<span class="username-box">User</span>
			<span class="timestamp-box">timestamp</span><br>
			<span class="content-box">Hello world!</span>
		</div>
		<div class="message-container">
			<span class="username-box">basic_user</span>
			<span class="timestamp-box">new timestamp</span><br>
			<span class="content-box">Hi!</span>
		</div>
		<div class="message-container">
			<span class="username-box">User</span>
			<span class="timestamp-box">another one</span><br>
			<span class="content-box">Welcome to the chat!</span>
		</div>
	</div>
	<input id="text-input" type="text" placeholder="Enter your message here...">

	<div id="send-button-container" onclick="sendMessageButton();">
		<img src="img/send_icon.svg">
	</div>

	<script src="./index.js"></script>
</body>
</html>
